<!-- 解决方案页面 -->
<template>
  <div class="SolveScheme">
    <!-- <Head /> -->
    <div class="main">
      <!-- 标题文字 -->
      <div class="main_up">
        <h3>Case</h3>
        <p>案例</p>
      </div>

      <!-- 卡片 -->
      <div class="main_down">
        <div class="main_downW">
          <div class="CaseCard" v-for="(item, index) in card" :key="index">
            <div class="CaseCard_s">
              <!-- 上 -->
              <div class="CaseCard_up">
                <h4>{{ item.title }}</h4>
                <p>{{ item.titleY }}</p>
                <img class="img_two" :src="item.image" alt="" />
                <img class="img_one" src="./img/02bf.png" alt=""/>
              </div>
              <!-- 中间 -->
              <div class="CaseCard_conter">
                {{ item.paragraph }}
              </div>
              <!-- 下 -->
              <div class="CaseCard_down">
                <p>All</p>
                <div class="line"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- 点击 -->
        <div class="dj"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Head from "../components/Head";
export default {
  components: { Head },
  data() {
    return {
      card: [
        {
          title: "智慧园区",
          titleY: "Wisdom park",
          image: require("./img/two.png"),
          
          paragraph:
            "解决智慧园区行业痛点，打破信息孤岛，建成“安防消防一体化、能耗、空间、资产”一站式平台解决方案，促使园区管理平台化，数据可视化，流程自动化，全面提升园区管理效率。",
        },
        {
          title: "智慧景区",
          titleY: "Wisdom scenic spot",
          image: require("./img/one.png"),
          
          paragraph:
            "通过AI智能算法，实现人脸分析，人体结构化、人流控制，轨迹追踪、警报系统等数据对接分析，有效提升景区管理服务和对于突发事件的响应效率。",
        },
        {
          title: "智慧工厂",
          titleY: "Wisdom plant",
          image: require("./img/thre.png"),
          paragraph:
            "实现对“物流管控、生产管控、质量管控、设备管控、工艺管控、现场管控、成本管控”等业务域的全方位监测分析，为企业经营决策提供支撑。突出运营管理与应用在公司数字化转型升级和培育新发展动能中的关键作用。",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  methods: {},
};
</script>
<style lang="less" scoped>
.SolveScheme {
  width: 100vw;
  height: 100vh;
  overflow-y: hidden;
  overflow-x: hidden;
  // 大盒子
  .main {
    padding-top: 16vh;
    width: 100vw;
    height: 100vh;
    position: relative;
    background: url("./img/06dbj.jpg") no-repeat center;
    background-size: 100% 100%;
  }
  // 标题文字
  .main_up {
    h3 {
      margin-left: 10.5vw;
      font-size: 0.58rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
    }
    p {
      margin-left: 10.5vw;
      font-size: 0.28rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
    }
  }
  // 卡片
  .main_down {
    .main_downW {
      margin: 0.5rem auto 0;
      width: 80vw;
      display: flex;
      justify-content: space-between;
      .caseKa {
        margin: 0 1.1rem 0rem 0;
      }

      //   卡片内容
      .CaseCard {
        .CaseCard_s {
          width: 23vw;
          height: 50vh;
          background-image: url("./img/01jx.png");
          background-size: 100% 100%;
        }
        // 上
        .CaseCard_up {
          width: 22.9vw;
          height: 30vh;
          //background-image: url("./img/03bj.png");
          //background-size: 100% 100%;
          padding-top: 2vh;
          position: relative;
          .img_two {
            width: 22.8vw;
            height: 30vh;
            position: absolute;
            top: 2px;
            left: 2px;
          }
          h4 {
            font-size: 0.43rem;
            font-family: PingFang SC;
            font-weight: bold;
            color: #ffffff;
            position: absolute;
            left: 2vw;
            top: 28px;
            z-index: 2;
          }
          p {
            font-size: 0.18rem;
            font-family: PingFang SC;
            font-weight: bold;
            color: #fefefe;
            position: absolute;
            left: 2vw;
            top: 9vh;
            z-index: 2;
          }
          .img_one {
            width: 50px;
            position: absolute;
            right: 3vh;
            top: 23.9vh;
          }
        }
        // 中
        .CaseCard_conter {
          width: 88%;
          margin: 0 auto;
          margin-top: 3vh;
          font-size: 0.16rem;
          font-family: PingFang SC;
          font-weight: bold;
          color: #fefefe;
          line-height: 3vh;
          opacity: 0.8;
          word-break: break-all;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        //下
        .CaseCard_down {
          max-width: 0.3rem;
          max-height: 0.2rem;
          margin-left: 0.26rem;
          margin-top: 2vh;
          p {
            font-size: 0.14rem;
            font-family: Myriad Pro;
            font-weight: bold;
            color: #ffffff;
            margin-left: 0.05rem;
          }
          .line {
            width: 1.5vw;
            height: 0.3vh;
            background: #00d5ff;
            margin: 0 auto;
          }
        }
      }
    }
  }
  //点击
  .dj {
    margin: 0.7rem auto 0;
    color: #ffffff;
    font-size: 0.28rem;
    font-weight: bold;
    width: 1.45rem;
    height: 0.43rem;
    background: url("./img/05anniu.png") no-repeat center;
    background-size: 100% 100%;
  }
}
</style>
